import QtQuick 2.0

Rectangle{
    id:virtualKeyboard
    color:"black"
    state:"minimal"
    z:100
//    width:220

    signal buttonPressed(var b,var txt)

    Rectangle{
        id:lblRect
        color:"black"
        width:lbl.width
        height:lbl.height
        anchors.right: parent.right
        anchors.top: parent.top
        Text{
            id:lbl
//            anchors.fill: parent
            font.pointSize: 12
            font.italic: true
            color: "white"
            horizontalAlignment: Text.AlignHCenter
//            text:qsTr("Show virtual keyboard")
        }
        MouseArea{
            anchors.fill: parent
            onClicked: virtualKeyboard.state=(virtualKeyboard.state==="minimal" ? "enlarged" : "minimal")
        }
    }
    Rectangle{
        id:keyboard
        color:"black"
        border.width: 2
        anchors{
            left:parent.left
            right: parent.right
            bottom:parent.bottom
            top:lblRect.bottom
        }
        clip:true
        GridView{
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.margins: 5
            model: board
            delegate: key
            width:200
            cellWidth: 50
            cellHeight: 50
    //        snapMode: GridView.SnapToRow
            interactive: false
        }
        ListModel{
            id:board
            ListElement{buttonRole:Qt.Key_0 ;buttonText:"0"}
            ListElement{buttonRole:Qt.Key_1 ;buttonText:"1"}
            ListElement{buttonRole:Qt.Key_2 ;buttonText:"2"}
            ListElement{buttonRole:Qt.Key_3 ;buttonText:"3"}
            ListElement{buttonRole:Qt.Key_4 ;buttonText:"4"}
            ListElement{buttonRole:Qt.Key_5 ;buttonText:"5"}
            ListElement{buttonRole:Qt.Key_6 ;buttonText:"6"}
            ListElement{buttonRole:Qt.Key_7 ;buttonText:"7"}
            ListElement{buttonRole:Qt.Key_8 ;buttonText:"8"}
            ListElement{buttonRole:Qt.Key_9 ;buttonText:"9"}
            ListElement{buttonRole:Qt.Key_Semicolon ;buttonText:";"}
            ListElement{buttonRole:Qt.Key_Apostrophe ;buttonText:"'"}
            ListElement{buttonRole:Qt.Key_A ;buttonText:"a"}
            ListElement{buttonRole:Qt.Key_B ;buttonText:"b"}
            ListElement{buttonRole:Qt.Key_C ;buttonText:"c"}
            ListElement{buttonRole:Qt.Key_D ;buttonText:"d"}
            ListElement{buttonRole:Qt.Key_E ;buttonText:"e"}
            ListElement{buttonRole:Qt.Key_F ;buttonText:"f"}
            ListElement{buttonRole:Qt.Key_G ;buttonText:"g"}
            ListElement{buttonRole:Qt.Key_H ;buttonText:"h"}
            ListElement{buttonRole:Qt.Key_I ;buttonText:"i"}
            ListElement{buttonRole:Qt.Key_J ;buttonText:"j"}
            ListElement{buttonRole:Qt.Key_K ;buttonText:"k"}
            ListElement{buttonRole:Qt.Key_L ;buttonText:"l"}
            ListElement{buttonRole:Qt.Key_M ;buttonText:"m"}
            ListElement{buttonRole:Qt.Key_N ;buttonText:"n"}
            ListElement{buttonRole:Qt.Key_O ;buttonText:"o"}
            ListElement{buttonRole:Qt.Key_P ;buttonText:"p"}
            ListElement{buttonRole:Qt.Key_Q ;buttonText:"q"}
            ListElement{buttonRole:Qt.Key_R ;buttonText:"r"}
            ListElement{buttonRole:Qt.Key_S ;buttonText:"s"}
            ListElement{buttonRole:Qt.Key_T ;buttonText:"t"}
            ListElement{buttonRole:Qt.Key_U ;buttonText:"u"}
            ListElement{buttonRole:Qt.Key_V ;buttonText:"v"}
            ListElement{buttonRole:Qt.Key_W ;buttonText:"w"}
            ListElement{buttonRole:Qt.Key_X ;buttonText:"x"}
            ListElement{buttonRole:Qt.Key_Y ;buttonText:"y"}
            ListElement{buttonRole:Qt.Key_Z ;buttonText:"z"}
            ListElement{buttonRole:Qt.Key_Comma ;buttonText:","}
            ListElement{buttonRole:Qt.Key_Period ;buttonText:"."}
            ListElement{buttonRole:Qt.Key_Space ;buttonText:" "}
            ListElement{buttonRole:Qt.Key_Backspace ;buttonText:"<-"}
            ListElement{buttonRole:Qt.Key_Shift ;buttonText:"^^"}
            ListElement{buttonRole:Qt.Key_Enter ;buttonText:"->"}
        }
        Component{
            id:key
            FKKeyButton{
                id:keyButton
                text:buttonText
                buttonKey: buttonRole
                onClicked: virtualKeyboard.buttonPressed(buttonKey,text)
            }
        }
    }
    states: [
        State {
            name: "minimal"
            PropertyChanges {
                target: virtualKeyboard
                width:0
            }
            PropertyChanges {
                target: lbl
                text:qsTr("Show virtual keyboard")
            }
        },
        State {
            name: "enlarged"
            PropertyChanges {
                target: virtualKeyboard
                width:200
            }
            PropertyChanges {
                target: lbl
                text:qsTr("Hide virtual keyboard")
            }
        }
    ]
    transitions: [
        Transition {
            from: "*"
            to: "*"
            NumberAnimation { target: virtualKeyboard; property: "width"; duration: 300; easing.type: Easing.InOutQuad }
        }
    ]
}
